<template>
<view class="body">
    <view class="base">
        <view class="border">
            <view class="title">所在城市</view>
            <view class="left">
                <view class="city">
                    <picker name="city" mode="selector" :value="cityIndex" :range="city" @change="citySelect">
                        <view class="content">{{city[cityIndex]}}</view>
                    </picker>
                </view>
                <image src="/static/images/calculator/1.png" class="back"></image>
            </view>
        </view>
        <view class="border">
            <view class="title">参保类型</view>
            <view class="left">
                <view class="type">
                    <picker name="type" mode="selector" :value="typeIndex" :range="type" @change="typeSelect">
                        <view class="content">{{type[typeIndex]}}</view>
                    </picker>
                </view>
                <image src="/static/images/calculator/1.png" class="back"></image>
            </view>
        </view>
    </view>
    <view class="tab-bar">
        <view :class="'bar-item ' + (itemIndex == 0 ? 'click' : '')" @tap="tabToggle" data-index="0">
            单项计算
        </view>
        <view :class="'bar-item ' + (itemIndex == 1 ? 'click' : '')" @tap="tabToggle" data-index="1">
            计算结果
        </view>
    </view>
    <view class="result" :style="'display: ' + (itemIndex == 1 ? 'block': 'none')">
        <view class="title-list">
            <view v-for="(item, index) in title" :key="index" class="title-item">{{item}}</view>
        </view>
        <view class="cal-list">
            <view v-for="(item, index) in calculators" :key="index" :class="'cal-item ' + (calIndex == index ? 'chouse' : '')" @tap="choseItem" :data-index="index">
                <view class="name item">
                    <view class="name-text">{{item.name}}</view>
                    <view class="computing" v-if="item.computing">计算中</view>
                </view>
                <view class="base item">{{item.base}}</view>
                <view class="per item">
                    <view class="num">{{item.perNum}}</view>
                    <view class="prop">{{item.perProp}}%</view>
                </view>
                <view class="com item">
                    <view class="num">{{item.comNum}}</view>
                    <view class="prop">{{item.comProp}}%</view>
                </view>
                <view class="total item">
                    <view class="total-num">{{item.total}}</view>
                    <image src="/static/images/calculator/7.png" class="done" v-if="item.isDone"></image>
                </view>
            </view>
        </view>
        <view class="cal-item res-total">
            <view class="total item">
                <view class="total-num">合计</view>
            </view>
            <view class="total item">
                <view class="total-num"></view>
            </view>
            <view class="total item">
                <view class="total-num">{{perTotal}}</view>
            </view>
            <view class="total item">
                <view class="total-num">{{comTotal}}</view>
            </view>
            <view class="total item">
                <view class="total-num">{{total}}</view>
            </view>
        </view>
        <view class="control">
            <button class="start-cal" @tap="removeAll">全部清空</button>
            <navigator class="to-major" hover-class="navigator-hover" open-type="navigateBack">
                <image src="/static/images/calculator/4.png" class="tips"></image>
                <text>输入你的工资，直接得出五险一金。</text>
                <text class="to">去查看>></text>
            </navigator>
        </view>
    </view>
    <form @submit="computed" :style="'display: ' + (itemIndex == 0 ? 'block' : 'none')">
        <view class="controls">
            <view class="tools-name">{{calName}}项目</view>
            <view class="left">
                <button form-type="reset" class="clear" @tap="clear">清空</button>
            </view>
        </view>
        <view class="info">
            <view class="border">
                <view class="title">{{calIndex == 5 ? '缴费基数' : '参保基数'}}</view>
                <view class="left">
                    <view class="base-num">
                        <input name="base" @blur="baseNumInput" data-type="pay" :value="base" type="number" :placeholder="'填写范围：' + (calIndex == 5 ? gongjijinMin + '-' + gongjijinMax : shebaoMin + '-' + shebaoMax)">
                        <text>元</text>
                    </view>
                </view>
            </view>
            <view class="border">
                <view class="title">个人缴纳比例</view>
                <view class="left">
                    <view class="base-num">
                        <input name="per" type="number" @blur="baseNumInput" data-type="per" :value="per" :placeholder="calIndex == 5 ? '5-12' : '请填写比例'">
                        <text>%</text>
                    </view>
                </view>
            </view>
            <view class="border">
                <view class="title">企业缴纳比例</view>
                <view class="left">
                    <view class="base-num">
                        <input name="com" type="number" @blur="baseNumInput" data-type="com" :value="com" :placeholder="calIndex == 5 ? '5-12' : '请填写比例'">
                        <text>%</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="control">
            <button class="start-cal" form-type="submit">计算</button>
            <navigator class="to-major" hover-class="navigator-hover" open-type="navigateBack">
                <image src="/static/images/calculator/4.png" class="tips"></image>
                <text>输入你的工资，直接得出五险一金。</text>
                <text class="to">去查看>></text>
            </navigator>
        </view>
    </form>
    <tools :title="name" :path="path"></tools>
</view>
</template>

<script>
import util from "../../../../utils/util";
const app = getApp();
var cityInfo = [];
var shebaoMax = 0;
var gongjijinMax = 0;
var shebaoMin = 0;
var gongjijinMin = 0;
import tools from "../../../../component/tools/tools";

export default {
  data() {
    return {
      itemIndex: 0,
      city: [],
      cityIndex: 0,
      type: ["职工", "居民"],
      typeIndex: 0,
      title: ["项目", "基数", "个人", "企业", "小计"],
      calculators: [{
        name: "养老",
        base: 0,
        perNum: 0,
        perProp: 0,
        comNum: 0,
        comProp: 0,
        total: 0,
        isDone: false,
        computing: true
      }, {
        name: "医疗",
        base: 0,
        perNum: 0,
        perProp: 0,
        comNum: 0,
        comProp: 0,
        total: 0,
        isDone: false,
        computing: false
      }, {
        name: "工伤",
        base: 0,
        perNum: 0,
        perProp: 0,
        comNum: 0,
        comProp: 0,
        total: 0,
        isDone: false,
        computing: false
      }, {
        name: "生育",
        base: 0,
        perNum: 0,
        perProp: 0,
        comNum: 0,
        comProp: 0,
        total: 0,
        isDone: false,
        computing: false
      }, {
        name: "失业",
        base: 0,
        perNum: 0,
        perProp: 0,
        comNum: 0,
        comProp: 0,
        total: 0,
        isDone: false,
        computing: false
      }, {
        name: "公积金",
        base: 0,
        perNum: 0,
        perProp: 0,
        comNum: 0,
        comProp: 0,
        total: 0,
        isDone: false,
        computing: false
      }],
      calIndex: 0,
      calName: "养老",
      base: "",
      per: "",
      com: "",
      perTotal: 0,
      comTotal: 0,
      total: 0,
      shebaoMin: 0,
      shebaoMax: 0,
      gongjijinMin: 0,
      gongjijinMax: 0,
      name: "",
      path: ""
    };
  },

  components: {
    tools
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    util.getUrl(app.globalData.url).then(res => {
      this.getCity();
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    tabToggle(e) {
      let itemIndex = e.currentTarget.dataset.index;
      this.setData({
        itemIndex
      });
    },

    removeAll() {
      this.calculators.forEach((item, index) => {
        item.base = 0;
        item.perNum = 0;
        item.perProp = 0;
        item.comNum = 0;
        item.comProp = 0;
        item.total = 0;
        item.isDone = false;
        item.computing = index == this.calIndex ? true : false;
      });
      this.setData({
        calculators: this.calculators,
        base: 0,
        per: 0,
        com: 0,
        perTotal: 0,
        comTotal: 0,
        total: 0
      });
    },

    getCity() {
      util.request("zhuanti.php", {
        action: "ss_type"
      }).then(res => {
        if (res.data.message == "success") {
          let city = [];
          res.data.data.forEach(item => city.push(item.cityname));
          cityInfo = res.data.data;
          this.setData({
            city,
            type: res.data.data[0].type
          });
          this.getCityInfo();
        }
      });
    },

    citySelect(e) {
      let cityIndex = e.detail.value;
      let type = cityInfo[cityIndex].type;
      this.setData({
        type,
        cityIndex,
        typeIndex: 0
      });
      this.getCityInfo();
    },

    typeSelect(e) {
      let typeIndex = e.detail.value;
      this.setData({
        typeIndex
      });
      this.getCityInfo();
    },

    getCityInfo() {
      util.request("zhuanti.php", {
        action: "wuxianyijin",
        citycode: cityInfo[this.cityIndex].citycode,
        type: this.type[this.typeIndex]
      }).then(res => {
        if (res.data.message == "success") {
          shebaoMax = Number(res.data.data.ss.shebao.max);
          shebaoMin = Number(res.data.data.ss.shebao.min);
          gongjijinMax = Number(res.data.data.ss.gjj.max);
          gongjijinMin = Number(res.data.data.ss.gjj.min);
          this.setData({
            shebaoMin,
            shebaoMax,
            gongjijinMin,
            gongjijinMax,
            name: res.data.data.ss.title,
            path: res.data.data.ss.url
          });
        }
      });
    },

    choseItem(e) {
      let calIndex = e.currentTarget.dataset.index;
      let info = this.calculators[calIndex];
      this.setData({
        calIndex
      });
      this.calculators.forEach((item, index) => {
        if (index == calIndex && !item.isDone) item.computing = true;else item.computing = false;
      });
      this.setData({
        calculators: this.calculators,
        calName: this.calculators[calIndex].name,
        per: info.perProp ? info.perProp : "",
        com: info.comProp ? info.comProp : "",
        base: info.base ? info.base : "",
        itemIndex: 0
      });
    },

    baseNumInput(e) {
      let input = parseFloat(e.detail.value);
      let type = e.currentTarget.dataset.type;
      let info = this.calculators[this.calIndex];

      if (type == "per") {
        if (this.calIndex == 5) {
          if (input < 5) {
            this.setData({
              per: 5
            });
            info.perProp = this.per ? this.per : 0;
          } else if (input > 12) {
            this.setData({
              per: 12
            });
            info.perProp = this.per ? this.per : 0;
          } else info.perProp = input;
        } else info.perProp = input ? input : 0;
      } else if (type == "com") {
        if (this.calIndex == 5) {
          if (input < 5) {
            this.setData({
              com: 5
            });
            info.comProp = this.com ? this.com : 0;
          } else if (input > 12) {
            this.setData({
              com: 12
            });
            info.comProp = this.com ? this.com : 0;
          } else info.comProp = input ? input : 0;
        } else info.comProp = input;
      } else {
        if (this.calIndex == 5) {
          if (input < gongjijinMin) {
            this.setData({
              base: gongjijinMin
            });
            info.base = this.base ? this.base : 0;
          } else if (input > gongjijinMax) {
            this.setData({
              base: gongjijinMax
            });
            info.base = this.base ? this.base : 0;
          } else info.base = input ? input : 0;
        } else {
          if (input < shebaoMin) {
            this.setData({
              base: shebaoMin
            });
            info.base = this.base ? this.base : 0;
          } else if (input > shebaoMax) {
            this.setData({
              base: shebaoMax
            });
            info.base = this.base ? this.base : 0;
          } else info.base = input ? input : 0;
        }
      }

      this.setData({
        calculators: this.calculators
      });
    },

    computed(e) {
      let parms = e.detail.value;
      let info;

      if (parms.base && parms.per && parms.com) {
        this.comResult();
        this.setData({
          itemIndex: 1
        });
      }
    },

    clear() {
      this.calculators[this.calIndex].base = 0;
      this.calculators[this.calIndex].perNum = 0;
      this.calculators[this.calIndex].perProp = 0;
      this.calculators[this.calIndex].comNum = 0;
      this.calculators[this.calIndex].comProp = 0;
      this.calculators[this.calIndex].total = 0;
      this.calculators[this.calIndex].isDone = false;
      this.calculators[this.calIndex].computing = false;
      this.setData({
        calculators: this.calculators
      });
      this.comResult("clear");
    },

    comResult(clear) {
      let info = this.calculators[this.calIndex];
      info.perNum = (info.base * info.perProp * 0.01).toFixed(2);
      info.comNum = (info.base * info.comProp * 0.01).toFixed(2);
      info.isDone = clear ? false : true;
      info.computing = clear ? true : false;
      info.total = parseFloat(info.perNum) + parseFloat(info.comNum);
      this.setData({
        calculators: this.calculators
      });
      this.perTotal = this.calculators.reduce((totla, item) => totla += parseFloat(item.perNum), 0);
      this.comTotal = this.calculators.reduce((totla, item) => totla += parseFloat(item.comNum), 0);
      this.total = this.perTotal + this.comTotal;
      this.setData({
        perTotal: this.perTotal.toFixed(2),
        comTotal: this.comTotal.toFixed(2),
        total: this.total.toFixed(2)
      });
    }

  }
};
</script>
<style>
.border {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 34rpx 36rpx;
    border-bottom: 2rpx solid #F1F1F1;
}

.title {
    font-size: 32rpx;
    color: #000000;
    font-weight: 500;
}

.back {
    width: 18rpx;
    height: 29rpx;
}

.content {
    margin-right: 23rpx;
}

.left {
    display: flex;
    align-items: center;
}

.title-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 27rpx;
    background-color: #AAAAAA;
}

.title-item {
    width: 20%;
    text-align: center;
    color: #FFFFFF;
}

.cal-item {
    height: 102rpx;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    padding-top: 17rpx;
    font-size: 28rpx;
    color: #666666;
    border-bottom: 2rpx solid #F1F1F1;
}

.item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.done {
    width: 58rpx;
    height: 28rpx;
    margin-top: 16rpx;
}

.name {
    font-size: 30rpx;
    font-weight: 500;
    color: #000000;
}

.computing {
    height: 28rpx;
    width: 80rpx;
    margin-top: 14rpx;
    font-size: 20rpx;
    line-height: 28rpx;
    color: #FFFFFF;
    border-radius: 14rpx;
    background-color: #FF6600;
}

.prop {
    color: #FF6600;
}

.chouse {
    background-color: #F2F2F2;
}

.tools-name {
    font-size: 32rpx;
    font-weight: bold;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 34rpx 38rpx;
}

.clear {
    font-size: 30rpx;
    color: #666666;
    background-color: #FFFFFF;
}

.computed {
    height: 52rpx;
    width: 120rpx;
    font-size: 30rpx;
    line-height: 52rpx;
    color: #FFFFFF;
    text-align: center;
    border-radius: 26rpx;
    background-color: #FF6600;
}

.base-num {
    display: flex;
    margin-right: 19rpx;
}

.input-placeholder {
    text-align: right;
}

input {
    width: 400rpx;
    margin-right: 19rpx;
    text-align: right;
}

.control {
    padding: 35rpx 36rpx;
    background-color: rgb(242, 242, 242);
}

.to-major {
    height: 60rpx;
    border-radius: 30rpx;
    line-height: 60rpx;
    font-size: 22rpx;
    color: #000000;
    text-align: center;
    background-color: #F5E2CF;
}

.to {
    margin-left: 23rpx;
    color: #FF6600;
}

.tips {
    width: 26rpx;
    height: 20rpx;
    margin-right: 14rpx;
}

.res-total {
    font-size: 30rpx;
    font-weight: bold;
    color: #FF9900;
}

.tab-bar {
    height: 60rpx;
    padding-bottom: 20rpx;
    padding-top: 40rpx;
    display: flex;
    justify-content: space-around;
}

.bar-item {
    font-size: 30rpx;
    font-weight: bold;
}

.click {
    color: #FF6600;
    border-bottom: 4rpx solid #FF6600;
}

.start-cal {
    height: 90rpx;
    margin-top: 32rpx;
    margin-bottom: 20rpx;
    font-size: 34rpx;
    line-height: 90rpx;
    color: #FFFFFF;
    text-align: center;
    border-radius: 15rpx;
    background-color: #FF6600;
}
</style>